<template>
  <p>
    <span>{{ msg }}</span>
  </p>
  <van-button @click="toastHandle" type="primary">toast演示</van-button>
  <van-button @click="loadingHandle" type="primary">loading演示</van-button>
  <Loading :closeAble="true" text="请稍后" v-model:show="show" />
  <div class="main-pinia">
    <p>pinia存储实例</p>
    <p>Count: {{ counter.count }}</p>
    <van-button type="primary" @click="incrementParent()">点击修改Count</van-button>
  </div>
  <div class="main-http">
    <p>调用接口实例</p>
    <van-button type="primary" @click="getHttpParent()">点击调用接口</van-button>
  </div>
  <div class="main-http">
    <p>jsx实例</p>
    <MyComponent :message="message"></MyComponent>
    <p>vue子组件实例</p>
    <Message :message="message"></Message>
  </div>
</template>

<script setup>
import Loading from '@/components/Loading.vue'
import { useTips } from '@/hooks/useTips.js'
import { useHomeView } from '../home/useHomeView.js'
import { encryptSign } from '@hrfe/tools'
import { isDone } from './index'
import MyComponent from './index.jsx'
import Message from './components/Message.vue'
const message = 'Hello from parent component!'
const { showToast, showSuccessToast } = useTips()
const { counter, increment, getHttp } = useHomeView()
// 定义参数
const show = ref(false)
const msg = ref('初始模板')

console.log(encryptSign, isDone, '自定义值')
/**
 * 点击提示
 */
const toastHandle = () => {
  showToast('提示内容')
}
/**
 * 点击加载
 */
const loadingHandle = () => {
  show.value = true
}
/**
 * 引用pinia实例
 */
const incrementParent = () => {
  increment()
}
/**
 * 点击调用接口
 */
const getHttpParent = () => {
  Promise.resolve()
    .then(() => {
      getHttp()
    })
    .then(() => {
      showSuccessToast('成功')
    })
}
</script>

<style lang="scss" scoped>
p {
  span {
    font-size: 16px;
    color: red;
  }
}

.main-pinia {
  p {
    font-size: 16px;
    color: red;
  }
}

.main-http {
  color: $primary;
}
</style>
